<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!--  文本格式化属性针对文本相关操作 （四种方式10个属性）
		   1.控制字体：font-family、font-size、font-weight
		   2.控制文本布局：text-align、line-height、letter-spacing、word-spacing
		   3.文本修饰效果：text-decoration、text-shadow
		   4.处理文本效果：white-space
		   -->
		   <style>
		/* 是css3注释,有且只有一个 */
		/*css3语法：选择器{
			        属性: 属性值;
					属性: 属性值;
					.....
		           }
				   叫法：一个样式
		*/	
	   bod y div#d1{/*通过加权方式，锁定元素  权值：101*/
		   color: #eecde7;
		   /*知识点1：文本格式化属性控制字体
		   font-family: 字体家族，指定字体形式;
		   */
		   font-family: 华文彩云,sans-serif;
		   /*设置多个字体：浏览器会按照顺序寻找可用字体
		   用户体验，用户系统有什么字体，优先指定字体
		   通常与统配选择器使用    *{}
		   */
		  /* 知识点2：文本格式化属性控制字体
		  font-size:字体大小属性，与单位共存
		  单位   px  像素    使用特点：绝对值，PC端
		        em   相对单位，理解：倍数
		                使用特点：相对父元素按照倍数方式，移动端
		  */
		 /* 知识点3：文本格式化属性控制字体
		 font-weight:字体粗细属性，不存在单位
		 属性值：数值【100 200 300 ...  900】
		        常用数值:400
		        单词【400==normal、bold、light】
		使用方法：统配选择器搭配使用：指定全局字体正常字体粗细		
		 */
		font-weight: 900;
		 font-size: 2em;
		 /*补充：1.英文大写；2.首字母大写；3.段落开始间距200px*/
		 text-transform: uppercase;
		 text-transform: capitalize;
		 text-indent: 200px;
	   }
	   div#d1{/*通过加权方式，锁定元素  权值：101*/
		 color:#aaffff 
		  /*知识点4：文本格式化属性控制文本格式【对齐、间隙】
		  text-align: 文本对齐属性
		  left|right|center|justify:两端对齐，用于弹性布局
		  */
		 text-align:justify;
		 /*知识点5：文本格式化属性控制文本格式【对齐，间隙】
		 行高属性：line-height：文本垂直效果
		使用方法：1.高度属性：属性值一致
		         2.在高度属性上加行高属性：属性值一致
		 
		 */
		border: 1px solid red;
		height: 100px;
		line-height: 100px;
		/*补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离*/
		/*知识点6：letter-spacing:设置字符之间间隙
		  知识点7：word-spacing:设置单词之间间隙
		*/
	   lett er-spacing: 10px;
	   word-spacing: 10px;
	   }
	   
		#d1{/*权值：100*/
			color: #e4393c;
		}	    
			  
				  
	a.c1{/*权值：*/
		/*知识点8：text-decoration 修饰超链接样式
		使用方法：与通配符一起使用，设置全局页面超链接样式
		属性值：none|underline
		*/
	   text-decoration: none;
	   /*知识点9：text-shadow 修饰文本阴影
	             属性值：X轴 Y轴 blur模糊距离 color
	   */
	  text-shadow: 8px 8px 8px #00557f;
	}	
		p{
					border: 1px solid red;
					/* 知识点10：文本换行效果
					 white-space：文本换行属性
					 属性值：
					 nowrap 不换行，只显示一行，超出部分隐藏
					 |pre保存空格和回车|normal默认，空格合并，换行隐藏
					 */
					white-space: pre;
                    overflow: hidden;
				}
		   
	</style>
	</head>
	<body>
		 <!-- 需求：创建div同时指定别名，添加假文【tab】
		          id选择器，通过加权 -->
		 <div id="d1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi dicta cupiditate, reprehenderit modi suscipit commodi temporibus quis esse culpa voluptates magni nisi possimus recusandae quae qui repellat cum voluptatem ab?</div>
	<hr>
	<h4>文本修饰效果</h4>
	<!-- 文本修饰相关属性
	 知识点7：text-decorating属性：设置超链接效果
	 -->
	<a class="c1 c2" href="http://www.tsgzy.edu.cn">实线跳转 【方式：6种】</a>
	<div style="height: 800px;"></div>
	<marquee>
	<h4>处理文本效果</h4>
	</marquee>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati quae facere ratione assumenda sequi modi architecto amet atque excepturi ad consequuntur quia, unde laborum consequatur, quidem in libero recusandae? Pariatur!</p>
	</body>
</html>